<template>
  <div class="edit">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span><span v-if="list.length && list[0].schoolName">【{{list[0].schoolName}}】</span>招生简章</span>
        <el-button @click="$router.go(-1)" style="float: right; padding: 3px 0" type="text">返回</el-button>
        <el-button @click="add(false)" size="mini" type="success">新增招生简章</el-button>
      </div>
      <el-table v-loading="loading" :data="list">
        <el-table-column label="院校名称" align="center" prop="schoolName"/>
        <el-table-column label="简章标题" align="center" prop="guideName" show-overflow-tooltip/>
        <el-table-column label="简章内容" align="center" prop="guideDesc" show-overflow-tooltip/>
        <el-table-column label="更新时间" align="center" prop="guideTime" show-overflow-tooltip/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="toDetail(scope.row)"
            >详情
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="add(scope.row)"
            >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :title="current.guideName" :visible.sync="dialogFormVisible" @closed="closeDia">
        {{current.guideDesc}}
      </el-dialog>
      <el-dialog :title="current.guideName ? '编辑简章' : '新增简章'" :visible.sync="editVis" @closed="closeDia">
        <el-form ref="form" :model="current" label-width="150px">
          <el-form-item label="院校名称" prop="schoolName">
            <el-input v-model="current.schoolName" placeholder="请输入中文名字" disabled/>
          </el-form-item>
          <el-form-item label="院校编码" prop="schoolCode">
            <el-input v-model="current.schoolCode" placeholder="请输入院校编码" disabled/>
          </el-form-item>
          <el-form-item label="标题" prop="schoolName" :rules="{required: true, message: '请输入标题'}">
            <el-input v-model="current.guideName" placeholder="请输入标题"/>
          </el-form-item>
          <el-form-item label="时间" prop="guideTime" :rules="{required: true, message: '请输入时间'}">
            <el-input v-model="current.guideTime" placeholder="请输入时间"/>
          </el-form-item>
          <el-form-item label="内容" prop="schoolName" :rules="{required: true, message: '请输入内容'}">
            <el-input v-model="current.guideDesc" placeholder="请输入内容" :autosize="{minRows: 4}" type="textarea"/>
          </el-form-item>
          <el-form-item>
            <el-button @click="editVis = false">取 消</el-button>
            <el-button type="primary" @click="saveCode">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  import {getCompassUniversityInfo} from "@/api/system/CompassUniversityInfo";
  import {addCompassAdmissionsGuide, updateCompassAdmissionsGuide, delCompassAdmissionsGuide} from "@/api/system/CompassAdmissionsGuide";
  import {getQueryObject} from "@/utils";

  export default {
    data() {
      return {
        schoolInfo: {},
        list: [],
        loading: true,
        dialogFormVisible: false,
        current: {},
        editVis: false
      }
    },

    async mounted() {
      let {id} = getQueryObject()
      if (id) {
        this.getInfo(id)
      }
    },

    methods: {
      // 编辑时候获取优惠券信息回显
      getInfo(id) {
        this.loading = true
        getCompassUniversityInfo(id).then(response => {
          this.list = response.data.compassAdmissionsGuideList
          this.schoolInfo = response.data
          this.loading = false
        });
      },

      uploadChange(res) {
        console.log(res)
      },

      toDetail(row) {
        this.current = row
        this.dialogFormVisible = true
      },

      closeDia() {
        this.getInfo(getQueryObject().id)
        this.current = {}
      },

      add(row) {
        this.editVis = true
        if (row) {
          this.current = row
          return
        }
        if (this.list && this.list[0]) {
          this.current.schoolName = this.list[0].schoolName
          this.current.schoolCode = this.list[0].schoolCode
        } else {
          this.current.schoolName = this.schoolInfo.schoolName
          this.current.schoolCode = this.schoolInfo.schoolCode
        }
      },

      saveCode() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.current.id != null) {
              updateCompassAdmissionsGuide(this.current).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.editVis = false
                }
              });
            } else {
              addCompassAdmissionsGuide(this.current).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.editVis = false
                }
              });
            }
          }
        });
      },

      handleDelete(row) {
        const ids = row.id
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delCompassAdmissionsGuide(ids);
        }).then(() => {
          this.getInfo(getQueryObject().id);
          this.msgSuccess("删除成功");
        }).catch(function () {
        });
      },
    }
  }
</script>

<style scoped>
  .el-input {
    width: 60%;
  }
</style>
